<script setup lang="ts">
import { provide, ref } from 'vue'
import Header from './components/Header.vue';
import BaseInfo from './components/BaseInfo.vue';
import NameInfo from './components/NameInfo.vue';
import SpouseInfo from './components/SpouseInfo.vue';
import AddressInfo from './components/AddressInfo.vue';
import CareerInfo from './components/CareerInfo.vue';

import LoanInfo from './components/LoanInfo.vue';
import DefaultInfo from './components/DefaultInfo.vue';
import LiabilitiesInfo from './components/LiabilitiesInfo.vue';
import NoCreditLoansInfo from './components/NoCreditLoansInfo.vue';
import CreditTransactionInfo12 from './components/CreditTransactionInfo1-2.vue';
import CreditTransactionInfo34 from './components/CreditTransactionInfo3-4.vue';
import CreditTransactionInfo56 from './components/CreditTransactionInfo5-6.vue';
import CreditTransactionInfo78 from './components/CreditTransactionInfo7-8.vue';
import NoCreditTransactionInfo from './components/NoCreditTransactionInfo.vue';
import PublicInfo from './components/PublicInfo.vue';
import QueryHistory from './components/QueryHistory.vue';
import { ElWatermark } from 'element-plus'
import dataInfo from '../data.json'
import useFindAccount from '@/hooks/useFindAccount'
import mark from '@/assets/mark.png'
const data = ref<any>({});
const accountInfo = ref<any>({})
provide('data', data);
provide('accountInfo', accountInfo)
setTimeout(() => {
  data.value = dataInfo.rptdata
  accountInfo.value = useFindAccount(dataInfo.rptdata)
}, 500)
</script>
<template>
    <ElWatermark :width="300" :height="170"  :image="mark" :gap="[300, 300]" >
    <div class="container" >
      <Header />
      <div class="h1 title">个人信用报告</div>
      <NameInfo />

      <div class="h2 title">一&nbsp;&nbsp;个人基本信息</div>
      <!-- 个人基本信息 -->
      <!-- 身份信息 -->
      <BaseInfo />

      <!-- 配偶信息 -->
      <SpouseInfo />

      <!-- 住址信息 -->
      <AddressInfo />

      <!-- 职业信息 -->
      <CareerInfo />
      <div class="h2 title">二&nbsp;&nbsp;信息概要</div>

      <!-- 信贷交易信息提示 -->
      <LoanInfo />

      <!-- 信贷交易违约信息概要 -->
      <DefaultInfo />


      <!-- 信贷交易授信及负债信息概要（未结清/未销户） -->
      <LiabilitiesInfo />

      <!-- （4）非信贷交易信息概要 -->
      <NoCreditLoansInfo />

      <div class="h2 title">三&nbsp;&nbsp;信贷交易信息明细</div>
      <CreditTransactionInfo12 />
      <CreditTransactionInfo34 />
      <CreditTransactionInfo56 />
      <CreditTransactionInfo78 />
      <div class="h2 title">四&nbsp;&nbsp;非信贷交易信息明细</div>
      <NoCreditTransactionInfo />
      <div class="h2 title">五&nbsp;&nbsp;公共信息明细</div>
      <PublicInfo />
      <div class="h2 title">六&nbsp;&nbsp;查询记录</div>
      <QueryHistory />
    </div> 
  </ElWatermark>


</template>

<style lang="less">

.container {
  padding: 20px 0;
}

.h1 {
  font-size: 34px;
  padding-bottom: 20px;
}

.h2 {
  font-size: 27px;
}

.h3 {
  font-size: 23px;
  font-weight: 500 !important;
}

.title {
  color: #181818;
  text-align: center;
  font-weight: 500;
}

table {
  border-collapse: collapse;
  border: 1px solid #31b4f5;
  font-size: 0.8rem;
  letter-spacing: 1px;
  margin: 10px auto 40px auto;
  width: 80%;
  color: #333;

  th,
  td {
    padding: 0px 8px;
    text-align: center;
    height: 40px;
    border: 1px solid #31b4f5;
  }

  th {
    font-weight: bold;
  }

}

caption {
  caption-side: top;
  padding: 10px;
  font-weight: bold;
  font-size: 18px;
}
</style>
